<template>
  <el-dialog
    v-model="visible"
    title="支付记录"
    width="1200px"
    :before-close="handleClose"
    class="consumption-dialog"
  >
    <div class="dialog-content">
      <!-- 表格区域 -->
      <el-table
        :data="pager.lists"
        stripe
        border
        style="width: 100%"
        max-height="400"
      >
        <!-- <el-table-column type="selection" width="55" /> -->

        <el-table-column label="购买名称" prop="orderDesc" width="100" />
                  <el-table-column label="购买金额" width="100" >
                    <template #default="{ row }">
                      {{ row.actualAmount || '—' }}
                    </template>
                  </el-table-column>
                  <el-table-column label="订单号" min-width="150">
                      <template #default="{ row }">
                          {{ row.orderNo || '—' }}
                      </template>
                  </el-table-column>
                  <el-table-column label="支付订单号" min-width="150">
                      <template #default="{ row }">
                          {{ row.platformTransactionId || '—' }}
                      </template>
                  </el-table-column>

                  <el-table-column label="虚拟币数量/VIP时间" width="150">
                      <template #default="{ row }">
                          {{ row.buyNum}}{{ row.unit }}
                      </template>
                  </el-table-column>
                  <el-table-column label="支付状态" width="100" >
                    <template #default="{ row }">
                      {{ row.paymentStatus === 0 ? '待支付' : row.paymentStatus === 1 ? '支付成功' : row.paymentStatus === 2 ? '支付失败' : row.paymentStatus === 3 ? '已关闭' : '已退款' }}
                    </template>
                  </el-table-column>
                  <el-table-column label="支付时间" width="170" >
                    <template #default="{ row }">
                        {{ row.paymentTime || '—' }}
                    </template>
                  </el-table-column>
                  <el-table-column label="支付方式" width="100" >
                    <template #default="{ row }">
                      {{ row.paymentChannel === 2 ? '微信支付' : '支付宝支付' }}
                    </template>
                  </el-table-column>
      </el-table>

      <!-- 分页 --> 
      <div class="flex justify-end mt-4">
          <pagination v-model="pager" @change="getLists" />
      </div>
    </div>

    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button  @click="handleClose">取消</el-button>
         <button class="confirm-btn" @click="handleConfirm">删除选中</button>   
        <el-button type="primary" @click="handleClose">确定</el-button>
      </div>
    </template> -->
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { payRecords } from '@/apis/user/user'
import { usePaging } from '@/hooks/usePaging'

// Props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  vipId: {
    type: String,
    default: '',
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'delete', 'confirm'])

// 响应式数据
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
})


const queryParams = reactive({
    memberId: ''
})
  
const { pager, getLists } = usePaging({
  fetchFun: payRecords,
  params: queryParams

}) 

 
const handleClose = () => {
  visible.value = false
}

 
// 监听弹窗打开，获取数据
watch(visible, (newVal) => {
  if (newVal) {
    queryParams.memberId = props.vipId
    getLists()
  }
})

// 组件挂载时获取数据
onMounted(() => {
  if (visible.value) {
    getLists()
  }
})
</script>

<style scoped lang="scss">
.consumption-dialog {
  .dialog-content {
    padding: 0;
  }

  .operation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 4px;
  }

  .search-bar {
    display: flex;
    align-items: center;
  }
  /*
  .amount-text {
    color: #f56c6c;
    font-weight: 600;
  } */

  .payment-method {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    .payment-icon {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }
  }

  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .consumption-dialog {
    .operation-bar {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }

    .search-bar {
      justify-content: center;
    }
  }
}
</style>
